<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/normalize.css">
<style>
	.warp{
		position: relative;
	}
	.warp span{
		font-family: PingFangSC-Semibold;
	}
	#name{
		position: absolute;		
		color: #21DAB3;
	}
	#info1{
		position: absolute;				
		color: #FFCC20;
	}
	#info2{
		position: absolute;
		color: #21DAB3;
	}
	#qrcode{
		position: absolute;
	}
	.bg{
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	.bg .modal{
		background: #FFF;
		width: 540px;
		height: 150px;
		line-height: 150px;
		font-size: 36px;
		text-align: center;
		margin: 0 auto;
		margin-top:200px;
	}
</style>
</head>
<body style="margin:0;padding:0;border:0;">
	<div id="sharePic" class="wrap" onclick="takeScreenshot()">
		<img  id="img" style="width:100%;height:100%;border:0;" src="img/background.jpg">
		<span id="name">我是胡可可</span>
		<span id="info1">邀你一起报名</span>
		<span id="info2">超级全能生联考第 1021 名考生</span>	
		<div id="qrcode">
		</div>		
	</div>
	<div class="bg" style="display:none;">
		<div class="modal">
			长按保存图片，分享朋友圈
		</div>
	</div>
<script src='https://sfile.tl100.com/js/libs/qrcode.min.js'></script>
<script src='https://sfile.tl100.com/js/libs/html2canvas.min.js'></script>  
<script src='https://sfile.tl100.com/js/libs/canvas2image.js'></script>
<script>
	console.log(document.documentElement.clientWidth);
	console.log(document.documentElement.clientHeight);
	console.log(document.documentElement.scrollHeight);
	var rate = document.documentElement.clientWidth/1080;
	var ch = document.documentElement.clientHeight;
	document.getElementsByClassName('modal')[0].style['margin-top'] = (ch/2-75)+"px";
	// document.querySelector("#img").style.height = (1920*rate-10) +"px";
	var domName = document.querySelector("#name");
	domName.style.fontSize = 90*rate+"px";
	domName.style.left = 90*rate+"px";
	domName.style.top = 1601*rate+"px";
	var domInfo1 = document.querySelector("#info1");
	domInfo1.style.fontSize = 60*rate+"px";
	domInfo1.style.right = 170*rate+"px";
	domInfo1.style.top = 1612*rate+"px";
	var domInfo2 = document.querySelector("#info2");
	domInfo2.style.fontSize = 60*rate+"px";
	domInfo2.style.left = 90*rate+"px";
	domInfo2.style.top = 1716*rate+"px";
	var domQrcode = document.querySelector("#qrcode");
	domQrcode.style.right = 160*rate +"px";
	domQrcode.style.top = 1203*rate +"px";
	new QRCode(document.getElementById("qrcode"), {
		text: "https://m.tl100.com/lk"+location.search,
		width: 220*rate,
		height: 220*rate,
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.L
	});
	img.onload =function() {
	   document.getElementsByClassName('bg')[0].style.display = "";
	   setTimeout(function () {
		document.getElementsByClassName('bg')[0].style.display = "none";
		takeScreenshot();
	   }, 2000);
    }
	function takeScreenshot() {
    var shareContent = document.getElementById('sharePic'); 
		var width = shareContent.offsetWidth; 
		var height = shareContent.offsetHeight; 
		var canvas = document.createElement("canvas"); 
		var scale = 0.5; 

		canvas.width = width * scale; 
		canvas.height = height * scale; 
		canvas.getContext("2d").scale(scale, scale); 

		var opts = {
			scale: scale, 
			canvas: canvas, 
			logging: true, 
			width: width, 
			height: height 
		};
		html2canvas(shareContent, opts).then(function (canvas) {
			// document.body.appendChild(canvas);      
			var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
			document.body.appendChild(img);
			var arr = document.getElementsByTagName('img');
				arr[arr.length-1].style= "width:100%";
			});
			setTimeout(() => {
				document.getElementById('sharePic').style.display = "none";				
			}, 500);
    }
</script>
</body>
</html>
